<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button id="btn1"> 点击我一下</button>
		<script type="text/javascript">
			var btn1 = document.getElementById("btn1");
			// btn1.onclick = function(){
			// 	alert("1");
			// }
			
			/*
				使用对象.事件= 函数的形式绑定一个相应函数，
				不能绑定多个，如果绑定多个则后面的函数会覆盖掉前面的事件
				使用addEventListener()可以同时为一个元素绑定多个相应函数，
				这样当事件被触发时，相应函数将会按照函数绑定额顺序执行
				但是这个方法在ie8及以下不支持
			*/
		 //   addEventListener()
			// -通过这个方法也可以为元素绑定相应函数
			// -参数
			// 	1.事件的字符串,不要on
			// 	2.回调函数,当事件触发时函数会被调用
			// 	3.是否在捕获阶段触发事件,需要一个布尔值，一般都传flase
			// btn1.addEventListener("click",function(){
			// 	alert(2);
			// },false);
			// btn1.addEventListener("click",function(){
			// 	alert(3);
			// },false);
			// attachEvent()
			// 	-在IE8中可以使用attachEvent()来绑定事件
			// 	-参数:
			// 		1.事件的字符串,要on
			// 		2.回调函数
			// -这个方法也可以为一个事件绑定多个处理函数
			// 	不同的是他是先执行顺序和addEventListener()相反
			//	定义一个函数，为指定元素来绑定相应函数
			//	addEventListener()中的this，是绑定事件的对象
			//	attachEvent()中的this，是window
			//		需要统一两个方法中的this
			/*
				参数：
					obj 要绑定的对象
					eventStr 事件的字符串(不要on)
					callback 回调函数
			*/  
		   function callback(){
			   alert(this);
		   }
		   function bind( obj , eventStr , callback ){
			   // alert(1);
				if(obj.addEventListener){
				//大部分浏览器的兼容方式
					alert(1)
					obj.addEventListener(eventStr , callback , false);
				}else{
				//IE8及以下的
				//call方式可以修改this的值
					obj.attachEvent("on"+eventStr , function(){
						// 在匿名函数中调用回调函数
						callback.call(obj);
					});
				}
		   }
		   bind(btn1 , "click" , callback);
		   // btn1.addEventListener("click" , callback() , false);
		</script>
	</body>
</html>
